<template>
    <div>
      <input placeholder="输入关键字搜索" v-model="searchName" ref="inp" v-focus>
      <table class="my-table">
        <thead>
          <tr>
            <th>就诊日期</th>
            <th>医生姓名</th>
            <th>诊断结果</th>
            <th>处方信息</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="item in searchArr" :key="item.id">
            <td>{{ item.time }}</td>
            <td>{{ item.name }}</td>
            <td>{{ item.result }}</td>
            <td>{{ item.info }}</td>
            <td style="cursor: pointer;" @click="isDetailShow(item.id)">详情</td>
          </tr>
        </tbody>
      </table>
    </div>
  </template>

  <script>
  import _ from 'lodash'
  export default {

       //聚焦
      directives: {
        focus: {
            inserted(el) {
                el.focus()
            }
              }
                },
      props: {
            
            isShow: Boolean,
            searchArr:Array
          
      },
      data() {
            return {
                searchName:''
        }
      },

      methods: {
            isDetailShow(id) {
            this.$emit('isDetailShow',{id:id,flag:true})
        }
      },
      watch:{
            searchName: {
                handler: _.debounce(function (newValue) {
                    this.$emit("changeValue",newValue)                   
                  }, 500)
 
         }
      }
  }
  </script>
  
  
  <style scoped>
    .my-table {
      border-collapse: collapse;
      width: 100%;
    }
  
    .my-table td, .my-table th {
      border: 1px solid #ddd;
      padding: 8px;
      text-align: left;
    }
  
    .my-table th {
      background-color: #f2f2f2;
    }
  </style>
  